<template>
	<view v-if="work_detail != null" class="worker-detail">
		<view class="detail-top" style="height: 430rpx;background-image: linear-gradient(#FFEAEB,#F8F8F8);"></view>
		<u-navbar title="详细资料" :bgColor="bgColor" :autoBack="true"></u-navbar>
		<view class="bac_f p_re mr24 ml24 radius16" style="padding: 48rpx 40rpx;margin-top: -240rpx;">
			<view class="dis_f">
				<text class="fz48 fw">{{ work_detail.name }}</text>
				<button class="" @click="share" open-type="share"><image class="h48 ml20" src="../../static/image/fenxiang.png" mode="heightFix"></image></button>
			</view>
			<view class="fz28 tf_33 mt20">
				<text>年龄：</text>
				<text>{{ work_detail.age }}岁</text>
				<text class="tf_999 ml10 mr10">|</text>
				<text v-if="work_detail.exp">0年经验</text>
				<text v-else>0年经验</text>
			</view>
			<view class="mt16 dis_f">
				<text class="fz28 tf33">好评：</text>
				<u-rate :count="xincount" size="12" readonly :value="work_detail.star" active-color="#FF970E"></u-rate>
			</view>
			<!-- 			<view class="dis_f mt16" style="min-height: 32rpx;">
				<text style="line-height:32rpx;" class="fz20 tf_666 mr12 border1 tac pl12 pr12 radius4" v-for="(value, i) in work_detail.label" :key="i">{{ value }}</text>
			</view> -->
			<image class="p_ab border_f radius16" style="height: 230rpx;width: 230rpx; right: 34rpx;top: -30rpx;" :src="work_detail.avatar_image" mode="aspectFill"></image>
		</view>
		<!-- 选项卡 -->
		<view class="bac_f mt24 w702 auto radius16 scrollView" :class="{ fixed: istop }" :style="istop == 1 ? `margin-top:${statusHeight};width:100%` : ''">
			<u-tabs
				:list="tabs"
				disabled="true"
				lineWidth="20"
				@click="tabClick"
				lineHeight="7"
				:scrollable="false"
				:lineColor="
					`url() 100% 100%`
				"
				:activeStyle="{
					color: '#222',
					fontWeight: '600',
					fontSize: '15'
				}"
				:inactiveStyle="{
					color: '#999'
				}"
				itemStyle="padding-left: 5rpx; padding-right:5rpx;height: 42px;"
			></u-tabs>
			<view class="h1 bac_e7 mt10"></view>
		</view>
		<view class="Kmin pl30 bac_f pt40 pr30 pb40 mr24 ml24">
			<view class="fz36 fw">自我介绍</view>
			<view v-if="mine_info.introduction != null" class="mt40 fz26">{{ mine_info.introduction }}</view>
		</view>
		<view class="kEval pl30 pr30 pb40 bac_f mt24 mr24 ml24 radius16" style="overflow: hidden;">
			<view class="fz36 fw mt40">客户评价</view>
			<view v-if="eval_list.length != 0" class="mt40" v-for="(item, index) in eval_list" :key="index">
				<view class="user-info dis_flex">
					<view class="dis_f">
						<image :src="item.user_info.avatar" mode="widthFix" class="" style="width: 68rpx;"></image>
						<view class="ml22">
							<text class="fz28 tf33">{{ item.user_info.nickname }}</text>
							<view style="margin-top:6rpx;margin-left: -4rpx;"><u-rate size="20rpx" :count="xincount" readonly :value="item.star" active-color="#FF970E"></u-rate></view>
						</view>
					</view>
					<view class="fz24 tf_999">
						<text>{{ item.time }}</text>
					</view>
				</view>
				<view class="evaluate-info mt32 bac_f8 pl20 pr20 pt24 pb24 radius16">
					<text class="fz26 mt12">{{ item.text }}</text>
					<view class="dis_f fww radius8">
						<video v-if="item.video" :src="item.video" objectFit="cover" class="w180 h180 mr10 radius8"></video>
						<image class="w180 h180 mt12 mb12 mr10 radius8" v-for="(v, i) in item.images" :key="i" :src="v" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="pl30 Kjob pr30 pb40 bac_f mt24 mr24 ml24 radius16" style="overflow: hidden;">
			<view class="fz36 fw mt40">工作照片</view>
			<view v-if="work_images.work_images.length != 0" class="evaluate-info mt32 bac_f8 pl20 pr20 pt24 pb24 radius16">
				<view class="dis_f fww radius8">
					<image class="w180 h180 mt12 mb12 pl10 pr10 radius8" v-for="(v, i) in work_images.work_images" :key="v" :src="v" mode="aspectFill"></image>
				</view>
			</view>
			<view v-else class=""><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
		</view>
		<view class="pl30 pr30 pb40 bac_f mt24 mr24 ml24 radius16" style="overflow: hidden;">
			<view class="fz36 fw mt40">资格证照片</view>
			<view v-if="qual_images.qualification_images.length != 0" class="evaluate-info mt32 bac_f8 pl20 pr20 pt24 pb24 radius16">
				<view class="dis_f fww radius8">
					<image class="w180 h180 mt12 mb12 pl10 pr10 radius8" v-for="(v, i) in qual_images.qualification_images" :key="v" :src="v" mode="aspectFill"></image>
				</view>
			</view>
			<view v-else class=""><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
		</view>
		<view class="h200"></view>
		<view class="dis_f p_f h136 w bac_f bs4">
			<button open-type="contact">
				<view class="dfd_c ac ml20">
					<image src="../../static/image/phone-icon.png" class="w40 h40" mode="widthFix"></image>
					<view class="fz22 mt10 tf_666">拨打电话</view>
				</view>
			</button>
			<button open-type="contact"><view class="w592 btn ml20 radius8  tf h88 dis_f jc fz32 ">联系我们</view></button>
		</view>
	</view>
</template>

<script>
import { getWorkerDetail, mineInfo, userEval, workImages, qualImages } from '@/config/api.js';
export default {
	data() {
		return {
			top_local:'',
			k_evl_top: '',
			statusHeight: '', //状态栏高度
			myScroll: '', //tab位置
			istop: 0, //是否吸顶
			image_url: '',
			qual_images: null,
			work_images: null,
			eval_list: [],
			mine_info: null,
			work_detail: null,
			worker_id: '',
			xincount: '5',
			xinscore: '4',
			bgColor: 'rgba(255,255,255,0)',
			tabs: [{ name: '自我介绍' }, { name: '客户评价' }, { name: '工作照片' }, { name: '资格证照片' }]
		};
	},
	onLoad(option) {
		console.log('准备');
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 44 + 'px';
		if (option) {
			this.worker_id = option.worker_id;
		}
		this.getWorkerDetail();
		this.getMineInfo();
		this.getUserEval();
		this.getWorkImage();
		this.getQualImages();
	},
	mounted() {
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.scrollView')
				.boundingClientRect(data => {
					console.log('布局位置信息', JSON.stringify(data));
					console.log('节点离页面顶部的距离' + data.top);
				})
				.exec();
		}, 100);
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '您的好友给您分享了张福利的简历',
			imageUrl: this.image_url,
			path: 'https://hmj-dev.cy1015.com/api/page_job/workerDetail/workerDetail' + this.worker_id
		};
	},
	onPageScroll: function(e) {
		console.log(e);
		this.bgColor = '#fff';
		if (e.scrollTop == 0) {
			this.bgColor = 'rgba(255,255,255,0)';
		}
		if (e.scrollTop > this.myScroll) {
			console.log(this.myScroll);
			this.istop = 1;
		} else {
			this.istop = 0;
		}
	},
	methods: {
		// tab点击
		tabClick(e) {
			const query = uni.createSelectorQuery().in(this);
			if(e.index==0){
				uni.pageScrollTo({
					scrollTop:100,
					duration:300
				})
			}else if (e.index == 1) {
				query
					.select('.Kmin')
					.boundingClientRect(data => {
						console.log('布局位置信息', JSON.stringify(data));
						console.log('节点离页面顶部的距离' + data.top);
						uni.pageScrollTo({
							scrollTop:data.height+283,
							duration:300
						})
					})
					.exec();
			}else if(e.index==2){
				query
					.select('.kEval')
					.boundingClientRect(data => {
						console.log('布局位置信息', JSON.stringify(data));
						console.log('节点离页面顶部的距离' + data.top);
						uni.pageScrollTo({
							scrollTop:data.height+283,
							duration:300
						})
					})
					.exec();
			}else if(e.index==3){
				query
					.select('#Kjob,.kEval')
					.boundingClientRect(data => {
						console.log('布局位置信息', JSON.stringify(data));
						console.log('节点离页面顶部的距离' + data.top);
						uni.pageScrollTo({
							scrollTop:data.height+283,
							duration:300
						})
					})
					.exec();
			}
		},
		//获取页面节点的位置
		getDocumentLocal(e) {
				return data.top
		},
		//资格证照片
		getQualImages() {
			qualImages({ work_id: this.worker_id }).then(res => {
				console.log(res);
				this.qual_images = res;
			});
		},
		//工作照片
		getWorkImage() {
			workImages({ work_id: this.worker_id }).then(res => {
				console.log('工作照片', res);
				this.work_images = res;
			});
		},
		//客户评价
		getUserEval() {
			userEval({ work_id: this.worker_id }).then(res => {
				console.log('客户评价', res);
				this.eval_list = res;
			});
		},
		//自我介绍
		getMineInfo() {
			mineInfo({ work_id: this.worker_id }).then(res => {
				console.log(res);
				this.mine_info = res;
			});
		},
		//获取员工资料
		getWorkerDetail() {
			getWorkerDetail({ work_id: this.worker_id }).then(res => {
				console.log(res);
				this.work_detail = res;
				this.image_url = res.avatar_image;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
button::after {
	border: none;
}
button {
	position: relative;
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	// font-size: 18px;
	text-align: center;
	text-decoration: none;
	// line-height: 1;
	line-height: 1.35;
	// border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #fff;
}
.evaluate-info {
	text {
		display: -webkit-box;
		word-break: break-all; /*换行规则*/
		text-overflow: ellipsis; /*最后使用省略号显示*/
		overflow: hidden; /*超出部分隐藏*/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /*能够显示几行*/
	}
}
.fixed {
	position: fixed;
	top: 0rpx;
	z-index: 10;
	background-color: #fff;
}
</style>
